<template>
  <el-dialog
    v-el-drag-dialog
    title="安检单详情"
    :visible.sync="visible"
    width="1024px"
    class="SecurityCheckDetail"
    @closed="reset"
  >
    <div id="printDetail" ref="detailRef" class="detail">
      <div class="section">
        <div class="title" style="margin-top: 0;">
          <span class="title-icon" />
          <span class="title-text">安检信息</span>
        </div>
        <el-descriptions size="medium">
          <el-descriptions-item label="安检单号">{{
            detail.checkId
          }}</el-descriptions-item>
          <el-descriptions-item label="安检类型">{{
            detail.checkType === 1 ? "随单安检" : "定期安检"
          }}</el-descriptions-item>
          <el-descriptions-item label="关联订单号">{{
            detail.orderCode
          }}</el-descriptions-item>
          <el-descriptions-item label="客户名称">{{
            detail.csmName
          }}</el-descriptions-item>
          <el-descriptions-item label="客户类型">{{
            formatColumnMap(customerType, "value", detail.csmType, "desc")
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            detail.csmPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="客户地址">{{
            detail.csmAddress
          }}</el-descriptions-item>
          <el-descriptions-item label="责任机构">{{
            detail.orgName
          }}</el-descriptions-item>
          <el-descriptions-item label="安检时间">{{
            detail.checkDt ? moment(detail.checkDt).format("YYYY-MM-DD HH:mm:ss") : ""
          }}</el-descriptions-item>
          <el-descriptions-item label="安检人">{{
            detail.checkUser
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions size="medium" :column="1">
          <el-descriptions-item label="备注">{{ detail.remark }}</el-descriptions-item>
        </el-descriptions>
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">安检内容</span>
        </div>
        <div class="content">
          <div
            v-for="(item, index) in getBillList(detail.billItemList)"
            :key="index"
            class="ctn_item"
          >
            <p>{{ NumberToChinese(index + 1) }}、{{ item.itemName }}</p>
            <template v-for="(sub, idx) in item.subList">
              <p v-if="sub.itemType === 1" :key="idx">
                <!-- <svg-icon icon-class="radio" /> -->
                <!-- <span>{{ sub.itemDetailName }}</span> -->
                <img
                  src="@/icons/radio.png"
                  alt=""
                  style="width: 20px; height: 20px; vertical-align: middle;"
                >
                <!-- <input type="radio" checked style="color:#01999f;"> -->
                <span>{{ sub.itemDetailName }}</span>
                <!-- <el-radio value="1" label="1">{{ sub.itemDetailName }}</el-radio> -->
              </p>
            </template>
            <template v-for="(sub, idx) in item.subList">
              <p v-if="sub.itemType === 3" :key="idx">
                <!-- <svg-icon icon-class="checkbox" /> -->
                <!-- <el-checkbox :value="true" :checked='true'>{{ sub.itemDetailName }}</el-checkbox> -->
                <img
                  src="@/icons/checkbox.png"
                  alt=""
                  style="width: 20px; height: 20px; vertical-align: middle;"
                >
                <!-- <input type="checkbox" checked style="color:#01999f;"> -->
                <span>{{ sub.itemDetailName }}</span>
              </p>
            </template>
            <template v-for="(sub, idx) in item.subList">
              <p v-if="sub.itemType === 5" :key="idx" style="margin-left: 10px;">
                <span>{{ sub.itemDetailName }}</span>
              </p>
            </template>
          </div>
        </div>
      </div>
      <div v-if="detail.imageName" class="section">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">安检拍照</span>
        </div>
        <div v-if="images.length > 0" class="img">
          <img :src="imgBaseUrl + images[0]" alt="安检拍照">
        </div>
      </div>
      <div class="section">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">客户签字</span>
        </div>
        <div class="img">
          <img :src="imgBaseUrl + detail.cmSignPict" alt="客户签字">
        </div>
      </div>
      <div v-if="tableData.length !== 0" class="section">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">整改内容</span>
        </div>
        <div class="table">
          <table>
            <tr>
              <th>序号</th>
              <th>整改项</th>
              <th>隐患级别</th>
            </tr>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.itemName }}&emsp;&emsp;{{ item.itemDetailName }}</td>
              <td>{{ getWarnLevelTip(item.warnLevel, warnLevelMap) }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div v-for="(item, index) in traceRecord" :key="index">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">{{ NumberToChinese(index + 1) }}次整改反馈</span>
        </div>
        <el-descriptions size="medium" :column="3">
          <el-descriptions-item label="整改结果">{{
            item.repairStatus ? repairStatusMap[item.repairStatus] : ""
          }}</el-descriptions-item>
          <el-descriptions-item label="整改时间">{{
            item.operateDt ? moment(item.operateDt).format("YYYY-MM-DD HH:mm:ss") : ""
          }}</el-descriptions-item>
          <el-descriptions-item label="整改人">{{
            item.createUser
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions size="medium" :column="1">
          <el-descriptions-item label="整改备注">{{ item.remark }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <div v-if="type === 'info'">
        <el-button @click="visible = false">关闭</el-button>
        <el-button
          v-if="corpCode !== '31013'"
          v-print="'#printDetail'"
          type="primary"
        >打印</el-button>
        <el-button v-else type="primary" @click="tryPrint">打印</el-button>
      </div>
      <div v-if="type === 'examine'" class="examine">
        <div>
          <el-button type="primary" @click="nextArticle">下一条</el-button>
        </div>
        <div>
          <el-button type="primary" @click="examine(true)">合格</el-button>
          <el-button type="primary" @click="examine(false)">驳回</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    gasCheckBillAudit,
    gasCheckQueryDetail,
    queryTraceRecord,
    gasCheckBillGetSessionID,
    gasCheckBillDetailWin
  } from '@/api'
  import NumberToChinese from '@/utils/NumberToChinese'
  import { formatColumnMap } from '@/utils'
  import moment from 'dayjs'
  import { imgBaseUrl } from '@/utils/config'
  import print from 'vue-print-nb'

  const repairStatusMap = {
    1: '整改不合格/未整改',
    2: '已整改'
  }

  export default {
    name: 'SecurityCheckDetail',
    directives: {
      print
    },
    props: {
      warnLevelMap: {
        type: Array,
        required: true
      },
      indexTableData: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        formatColumnMap,
        repairStatusMap,
        moment,
        NumberToChinese,
        imgBaseUrl,
        visible: false,
        type: 'info',
        temp: {},
        customerType: [],
        detail: {
          billItemList: []
        },
        traceRecord: [], // 整改反馈
        winData: {},
        corpCode: '31013',
        nextIndex: 0
      }
    },
    computed: {
      tableData: function() {
        return this.detail.billItemList.filter((item) => item.warnLevel > 0)
      },
      images: function() {
        return this.detail.imageName.split(';')
      }
    },
    // destroyed() {

    // },
    methods: {
      open(temp, type) {
        this.getDetailData(temp)
        this.getTraceRecord(temp)
        this.getWinData(temp)
        this.corpCode = temp.corpCode
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          this.temp = temp
          this.type = type
        })
      },
      async getDetailData(temp) {
        const res = await gasCheckQueryDetail({
          checkId: temp.checkId
        })
        this.detail = res.data
      },
      async getWinData(temp) {
        const res = await gasCheckBillDetailWin({
          checkId: temp.checkId,
          check: 1
        })
        this.winData = res.data
        this.customerType = JSON.parse(res.data.customerType)
      },
      async getTraceRecord(temp) {
        const res = await queryTraceRecord({
          checkId: temp.checkId
        })
        this.traceRecord = res.data
      },
      async examine(val) {
        const json = {
          checkIds: this.temp.checkId,
          checkStatus: 3
        }
        if (val) {
          json.checkStatus = 2
          if (this.temp.warnLevel > 0) {
            this.$confirm('存在安全隐患是否下发整改单?', '提示', {
              confirmButtonText: '下发',
              cancelButtonText: '不下发',
              type: 'warning'
            }).then(() => {
              json.issue = 1
              this.examineProm(json)
            }).catch(() => {
              json.issue = 0
              this.examineProm(json)
            })
          } else {
            this.examineProm(json)
          }
        } else {
          this.examineProm(json)
        }
      },
      async examineProm(json) {
        await gasCheckBillAudit(json)
        this.visible = false
        this.resolve()
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      },
      getBillList(billItemList) {
        if (!billItemList) return []
        const billList = []
        for (var i = 0; i < billItemList.length; i++) {
          const item = billItemList[i]
          let bill = null
          if (i === 0) {
            bill = item
          } else {
            if (item.itemId !== billItemList[i - 1].itemId) {
              bill = item
            }
          }
          if (bill) {
            bill = {
              ...item,
              subList: []
            }
            billList.push(bill)
          }
        }
        billItemList.map((item, index) => {
          const bill = billList.find((it) => it.itemId === item.itemId)
          // 单选型
          if (item.itemType === 1 && item.isChecked === 1) {
            bill.subList.push(item)
          }
          // 多选型
          if (item.itemType === 3 && item.isChecked === 1) {
            bill.subList.push(item)
          }
          // 普通
          if (item.itemType === 5) {
            bill.subList.push(item)
          }
        })
        // billItemList.map((item, index) => {
        //   // let bill = billList.find((it) => it.itemId === item.itemId)
        //   if (!bill) {
        //     bill = {
        //       ...item,
        //       subList: []
        //     }
        //     billList.push(bill)
        //   }
        //   // 单选型
        //   if (item.itemType === 1 && item.isChecked === 1) {
        //     bill.subList.push(item)
        //   }
        //   // 多选型
        //   if (item.itemType === 3 && item.isChecked === 1) {
        //     bill.subList.push(item)
        //   }
        //   // 普通
        //   if (item.itemType === 5) {
        //     bill.subList.push(item)
        //   }
        // })
        return billList
      },
      getWarnLevelTip(warnLevel, warnLevels) {
        if (!warnLevel) return '无隐患'
        const the = warnLevels.find(
          (item) => item.keyVal === warnLevel || item.value === warnLevel
        )
        return the ? the.keyName || the.desc : ''
      },
      async tryPrint() {
        if (this.detail.corpCode !== '31013') return
        const params = {
          reportlet: 'gasCheck.cpt',
          checkId: this.temp.checkId,
          corpSN: this.temp.corpSN,
          csmId: this.temp.csmId,
          check: 1,
          database: this.winData.database,
          op: 'getSessionID'
        }
        const { status, data } = await gasCheckBillGetSessionID({
          json: params
        })
        if (status === 200) {
          const tempWin = window.open()
          tempWin.location = this.winData.reportUrl + '?op=fr_pdfprint&cmd=native&sessionID=' + data
        }
      },
      reset() {
        this.temp = {}
        this.type = 'info'
        this.detail = {
          billItemList: []
        }
        this.traceRecord = []
        this.nextIndex = 0
      },
      nextArticle() {
        const waitAuditList = this.indexTableData.filter((v) => {
          return v.checkStatus === 1
        })

        if (waitAuditList.length) {
          let nextRow = waitAuditList[this.nextIndex]
          if (nextRow.checkId === this.temp.checkId) {
            this.nextIndex++
            nextRow = waitAuditList[this.nextIndex]
          }
          this.getDetailData(nextRow)
          this.getTraceRecord(nextRow)
          this.getWinData(nextRow)
          this.corpCode = nextRow.corpCode
          this.temp = nextRow
          if (this.nextIndex + 1 === waitAuditList.length) {
            this.nextIndex = 0
          } else this.nextIndex++
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.detail {
  .section {
    background: #fff;
    .tit {
      height: 40px;
      padding-left: 20px;
      line-height: 40px;
      color: #fff;
      background: #68b0c6;
    }
    ul {
      padding: 10px 20px;
    }
    .content {
      padding: 10px 0;
      margin: 0 20px;
      overflow: auto;
      background: #f5f5f5;
      p {
        padding: 6px 20px;
        line-height: 20px;
        i {
          margin: 0 10px;
        }
      }
    }
    .img {
      padding: 0 20px;
      margin-top: 20px;
      img {
        max-width: 500px;
        max-height: 300px;
      }
    }
    .table {
      margin: 20px 20px 0;
      table {
        min-width: 100%;
        tr:first-child {
          background: #f5f5f5;
        }
        th,
        td {
          padding: 5px 10px;
          border-bottom: 1px solid #f5f5f5;
          &:nth-of-type(1) {
            width: 15%;
            text-align: center;
          }
          &:nth-of-type(2) {
            width: 55%;
          }
          &:nth-of-type(3) {
            width: 30%;
            text-align: center;
          }
        }
      }
    }
  }
  .title {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  /deep/ .el-descriptions-item__label.label {
    width: 140px;
  }
}
.dialog-footer {
  .examine {
    display: flex;
    justify-content: space-between;

    > div {
      display: inline-block;
    }
  }
}

@media print {
  @page {
    margin: 3mm;
    size: auto;
  }
  body {
    height: auto; //在实际页面中高度不够部分内容隐藏了
  }
}
</style>
